<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据管理系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3b82f6', // 蓝色作为主色调
                        secondary: '#10b981', // 绿色作为辅助色（成功、确认）
                        danger: '#ef4444', // 红色作为危险色（删除、错误）
                        warning: '#f59e0b', // 黄色作为警告色
                        dark: '#1e293b', // 深色文本
                        light: '#f8fafc', // 浅色背景
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                },
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .transition-height {
                transition: max-height 0.3s ease-in-out;
            }
            .table-shadow {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            }
            .btn-hover {
                @apply transform transition-all duration-300 hover:scale-105;
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-inter text-dark">
<div class="container mx-auto px-4 py-8 max-w-7xl">
    <!-- 页面标题 -->
    <header class="mb-8">
        <h1 class="text-[clamp(1.75rem,3vw,2.5rem)] font-bold text-dark flex items-center">
            <i class="fa fa-database mr-3 text-primary"></i>数据管理系统
            <span class="ml-2 text-sm font-normal text-gray-500">v1.0.0</span>
        </h1>
        <p class="text-gray-600 mt-2">高效管理您的项目数据，支持增删改查和实时搜索</p>
    </header>

    <!-- 数据统计卡片 -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
        <div class="bg-white rounded-xl p-6 shadow-lg border-l-4 border-primary transform transition-all duration-300 hover:shadow-xl">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-gray-500 text-sm">总项目数</p>
                    <h3 class="text-2xl font-bold mt-1" id="total-projects">0</h3>
                </div>
                <div class="bg-primary/10 p-3 rounded-full">
                    <i class="fa fa-building text-primary text-xl"></i>
                </div>
            </div>
            <div class="mt-4 flex items-center text-sm">
          <span class="text-green-500 flex items-center">
            <i class="fa fa-arrow-up mr-1"></i> 12%
          </span>
                <span class="text-gray-500 ml-2">较上月</span>
            </div>
        </div>

        <div class="bg-white rounded-xl p-6 shadow-lg border-l-4 border-secondary transform transition-all duration-300 hover:shadow-xl">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-gray-500 text-sm">进行中</p>
                    <h3 class="text-2xl font-bold mt-1" id="active-projects">0</h3>
                </div>
                <div class="bg-secondary/10 p-3 rounded-full">
                    <i class="fa fa-spinner text-secondary text-xl"></i>
                </div>
            </div>
            <div class="mt-4 flex items-center text-sm">
          <span class="text-green-500 flex items-center">
            <i class="fa fa-arrow-up mr-1"></i> 8%
          </span>
                <span class="text-gray-500 ml-2">较上月</span>
            </div>
        </div>

        <div class="bg-white rounded-xl p-6 shadow-lg border-l-4 border-warning transform transition-all duration-300 hover:shadow-xl">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-gray-500 text-sm">待处理</p>
                    <h3 class="text-2xl font-bold mt-1" id="pending-projects">0</h3>
                </div>
                <div class="bg-warning/10 p-3 rounded-full">
                    <i class="fa fa-clock-o text-warning text-xl"></i>
                </div>
            </div>
            <div class="mt-4 flex items-center text-sm">
          <span class="text-red-500 flex items-center">
            <i class="fa fa-arrow-up mr-1"></i> 5%
          </span>
                <span class="text-gray-500 ml-2">较上月</span>
            </div>
        </div>
    </div>

    <!-- 搜索和操作区 -->
    <div class="bg-white rounded-xl p-6 shadow-lg mb-6 transform transition-all duration-300 hover:shadow-xl">
        <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
            <div class="relative flex-1 max-w-md">
                <input
                        type="text"
                        id="search-input"
                        placeholder="搜索项目名称、建设单位或地点..."
                        class="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all"
                >
                <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
            </div>

            <div class="flex gap-3">
                <button id="filter-btn" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-all flex items-center btn-hover">
                    <i class="fa fa-filter mr-2"></i>筛选
                </button>

                <button id="refresh-btn" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-all flex items-center btn-hover">
                    <i class="fa fa-refresh mr-2"></i>刷新
                </button>

                <button id="add-btn" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-all flex items-center btn-hover">
                    <i class="fa fa-plus mr-2"></i>新增项目
                </button>
            </div>
        </div>

        <!-- 筛选条件（默认隐藏） -->
        <div id="filter-panel" class="mt-4 pt-4 border-t border-gray-100 hidden overflow-hidden transition-height max-h-0">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">结构形式</label>
                    <select class="w-full rounded-lg border border-gray-300 p-2 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                        <option value="">全部</option>
                        <option value="框架">框架</option>
                        <option value="框剪">框剪</option>
                        <option value="筒体">筒体</option>
                        <option value="混合">混合</option>
                    </select>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">星级</label>
                    <select class="w-full rounded-lg border border-gray-300 p-2 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                        <option value="">全部</option>
                        <option value="一星级">一星级</option>
                        <option value="二星级">二星级</option>
                        <option value="三星级">三星级</option>
                    </select>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">建设时间范围</label>
                    <div class="flex gap-2">
                        <input type="date" class="flex-1 rounded-lg border border-gray-300 p-2 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                        <input type="date" class="flex-1 rounded-lg border border-gray-300 p-2 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                    </div>
                </div>
            </div>

            <div class="mt-4 flex justify-end gap-3">
                <button class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-all btn-hover">
                    重置
                </button>
                <button class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-all btn-hover">
                    应用筛选
                </button>
            </div>
        </div>
    </div>

    <!-- 数据表格 -->
    <div class="bg-white rounded-xl shadow-lg overflow-hidden transform transition-all duration-300 hover:shadow-xl">
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                <tr>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        <div class="flex items-center">
                            <input type="checkbox" id="select-all" class="mr-2 h-4 w-4 text-primary rounded border-gray-300 focus:ring-primary">
                            序号
                            <i class="fa fa-sort ml-1 text-gray-400"></i>
                        </div>
                    </th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        <div class="flex items-center">
                            项目名称
                            <i class="fa fa-sort ml-1 text-gray-400"></i>
                        </div>
                    </th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        <div class="flex items-center">
                            建筑面积
                            <i class="fa fa-sort ml-1 text-gray-400"></i>
                        </div>
                    </th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        <div class="flex items-center">
                            结构形式
                            <i class="fa fa-sort ml-1 text-gray-400"></i>
                        </div>
                    </th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        <div class="flex items-center">
                            建设单位
                            <i class="fa fa-sort ml-1 text-gray-400"></i>
                        </div>
                    </th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        <div class="flex items-center">
                            状态
                            <i class="fa fa-sort ml-1 text-gray-400"></i>
                        </div>
                    </th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        <div class="flex items-center">
                            操作
                        </div>
                    </th>
                </tr>
                </thead>
                <tbody id="data-table-body" class="bg-white divide-y divide-gray-200">
                <!-- 表格内容将通过JavaScript动态生成 -->
                <tr class="animate-pulse">
                    <td colspan="7" class="px-6 py-12 text-center">
                        <div class="flex flex-col items-center">
                            <i class="fa fa-spinner fa-spin text-primary text-3xl mb-3"></i>
                            <p class="text-gray-500">正在加载数据...</p>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>

        <!-- 分页 -->
        <div class="px-6 py-4 border-t border-gray-200 flex items-center justify-between">
            <div class="flex-1 flex justify-between sm:hidden">
                <button class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                    上一页
                </button>
                <button class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                    下一页
                </button>
            </div>
            <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                <div>
                    <p class="text-sm text-gray-700">
                        显示第 <span class="font-medium" id="page-range">1</span> 条至 <span class="font-medium" id="page-total">10</span> 条，共 <span class="font-medium" id="total-count">0</span> 条记录
                    </p>
                </div>
                <div>
                    <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
                        <button class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                            <span class="sr-only">上一页</span>
                            <i class="fa fa-chevron-left text-xs"></i>
                        </button>
                        <button class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-primary text-sm font-medium text-white">
                            1
                        </button>
                        <button class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                            2
                        </button>
                        <button class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                            3
                        </button>
                        <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
                ...
              </span>
                        <button class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                            10
                        </button>
                        <button class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                            <span class="sr-only">下一页</span>
                            <i class="fa fa-chevron-right text-xs"></i>
                        </button>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 新增/编辑项目模态框 -->
<div id="project-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-xl shadow-2xl w-full max-w-3xl max-h-[90vh] overflow-auto transform transition-all duration-300 scale-95 opacity-0" id="modal-content">
        <div class="p-6 border-b border-gray-200">
            <div class="flex items-center justify-between">
                <h3 class="text-lg font-bold text-gray-900" id="modal-title">新增项目</h3>
                <button id="close-modal" class="text-gray-400 hover:text-gray-500 focus:outline-none">
                    <i class="fa fa-times text-xl"></i>
                </button>
            </div>
        </div>

        <div class="p-6">
            <form id="project-form">
                <input type="hidden" id="project-id">

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">项目名称 <span class="text-red-500">*</span></label>
                        <input type="text" id="project-name" class="w-full rounded-lg border border-gray-300 p-2 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary" required>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">建筑面积(㎡) <span class="text-red-500">*</span></label>
                        <input type="number" id="project-area" class="w-full rounded-lg border border-gray-300 p-2 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary" required>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">层数</label>
                        <input type="number" id="project-floors" class="w-full rounded-lg border border-gray-300 p-2 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">结构形式 <span class="text-red-500">*</span></label>
                        <select id="project-structure" class="w-full rounded-lg border border-gray-300 p-2 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary" required>
                            <option value="">请选择</option>
                            <option value="框架">框架</option>
                            <option value="框剪">框剪</option>
                            <option value="筒体">筒体</option>
                            <option value="混合">混合</option>
                        </select>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">装配式</label>
                        <select id="project-prefabricated" class="w-full rounded-lg border border-gray-300 p-2 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                            <option value="否">否</option>
                            <option value="是">是</option>
                        </select>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">建设地点 <span class="text-red-500">*</span></label>
                        <input type="text" id="project-location" class="w-full rounded-lg border border-gray-300 p-2 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary" required>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">建设单位名称 <span class="text-red-500">*</span></label>
                        <input type="text" id="project-constructor" class="w-full rounded-lg border border-gray-300 p-2 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary" required>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">勘察单位名称</label>
                        <input type="text" id="project-surveyor" class="w-full rounded-lg border border-gray-300 p-2 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">勘察资质</label>
                        <input type="text" id="project-survey-qualification" class="w-full rounded-lg border border-gray-300 p-2 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">设计单位名称</label>
                        <input type="text" id="project-designer" class="w-full rounded-lg border border-gray-300 p-2 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">设计资质</label>
                        <input type="text" id="project-design-qualification" class="w-full rounded-lg border border-gray-300 p-2 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">星级</label>
                        <select id="project-star" class="w-full rounded-lg border border-gray-300 p-2 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                            <option value="">无</option>
                            <option value="一星级">一星级</option>
                            <option value="二星级">二星级</option>
                            <option value="三星级">三星级</option>
                        </select>
                    </div>
                </div>

                <div class="mt-6">
                    <label class="block text-sm font-medium text-gray-700 mb-1">项目描述</label>
                    <textarea id="project-description" rows="3" class="w-full rounded-lg border border-gray-300 p-2 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"></textarea>
                </div>
            </form>
        </div>

        <div class="p-6 border-t border-gray-200 flex justify-end gap-3">
            <button id="cancel-modal" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-all btn-hover">
                取消
            </button>
            <button id="save-project" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-all btn-hover">
                保存
            </button>
        </div>
    </div>
</div>

<!-- 详情模态框 -->
<div id="detail-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-xl shadow-2xl w-full max-w-4xl max-h-[90vh] overflow-auto transform transition-all duration-300 scale-95 opacity-0" id="detail-content">
        <div class="p-6 border-b border-gray-200">
            <div class="flex items-center justify-between">
                <h3 class="text-lg font-bold text-gray-900" id="detail-title">项目详情</h3>
                <button id="close-detail" class="text-gray-400 hover:text-gray-500 focus:outline-none">
                    <i class="fa fa-times text-xl"></i>
                </button>
            </div>
        </div>

        <div class="p-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <h4 class="text-sm font-medium text-gray-500 mb-1">项目名称</h4>
                    <p id="detail-name" class="text-gray-900 font-medium"></p>
                </div>

                <div>
                    <h4 class="text-sm font-medium text-gray-500 mb-1">建筑面积</h4>
                    <p id="detail-area" class="text-gray-900"></p>
                </div>

                <div>
                    <h4 class="text-sm font-medium text-gray-500 mb-1">层数</h4>
                    <p id="detail-floors" class="text-gray-900"></p>
                </div>

                <div>
                    <h4 class="text-sm font-medium text-gray-500 mb-1">结构形式</h4>
                    <p id="detail-structure" class="text-gray-900"></p>
                </div>

                <div>
                    <h4 class="text-sm font-medium text-gray-500 mb-1">装配式</h4>
                    <p id="detail-prefabricated" class="text-gray-900"></p>
                </div>

                <div>
                    <h4 class="text-sm font-medium text-gray-500 mb-1">建设地点</h4>
                    <p id="detail-location" class="text-gray-900"></p>
                </div>

                <div>
                    <h4 class="text-sm font-medium text-gray-500 mb-1">建设单位</h4>
                    <p id="detail-constructor" class="text-gray-900"></p>
                </div>

                <div>
                    <h4 class="text-sm font-medium text-gray-500 mb-1">勘察单位</h4>
                    <p id="detail-surveyor" class="text-gray-900"></p>
                </div>

                <div>
                    <h4 class="text-sm font-medium text-gray-500 mb-1">勘察资质</h4>
                    <p id="detail-survey-qualification" class="text-gray-900"></p>
                </div>

                <div>
                    <h4 class="text-sm font-medium text-gray-500 mb-1">设计单位</h4>
                    <p id="detail-designer" class="text-gray-900"></p>
                </div>

                <div>
                    <h4 class="text-sm font-medium text-gray-500 mb-1">设计资质</h4>
                    <p id="detail-design-qualification" class="text-gray-900"></p>
                </div>

                <div>
                    <h4 class="text-sm font-medium text-gray-500 mb-1">星级</h4>
                    <p id="detail-star" class="text-gray-900"></p>
                </div>
            </div>

            <div class="mt-6">
                <h4 class="text-sm font-medium text-gray-500 mb-1">项目描述</h4>
                <p id="detail-description" class="text-gray-900"></p>
            </div>

            <div class="mt-6 pt-6 border-t border-gray-100">
                <h4 class="text-sm font-medium text-gray-500 mb-3">项目时间线</h4>
                <div class="space-y-4">
                    <div class="flex">
                        <div class="flex-shrink-0 pt-0.5">
                            <div class="h-8 w-8 rounded-full bg-primary flex items-center justify-center">
                                <i class="fa fa-file-text-o text-white"></i>
                            </div>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm font-medium text-gray-900">受理时间</p>
                            <p id="detail-acceptance-time" class="text-sm text-gray-500"></p>
                        </div>
                    </div>

                    <div class="flex">
                        <div class="flex-shrink-0 pt-0.5">
                            <div class="h-8 w-8 rounded-full bg-secondary flex items-center justify-center">
                                <i class="fa fa-check text-white"></i>
                            </div>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm font-medium text-gray-900">完成备案时间</p>
                            <p id="detail-filing-time" class="text-sm text-gray-500"></p>
                        </div>
                    </div>

                    <div class="flex">
                        <div class="flex-shrink-0 pt-0.5">
                            <div class="h-8 w-8 rounded-full bg-warning flex items-center justify-center">
                                <i class="fa fa-calendar-check-o text-white"></i>
                            </div>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm font-medium text-gray-900">审查时间</p>
                            <p id="detail-review-time" class="text-sm text-gray-500"></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="p-6 border-t border-gray-200 flex justify-end">
            <button id="close-detail-btn" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-all btn-hover">
                关闭
            </button>
        </div>
    </div>
</div>

<!-- 删除确认模态框 -->
<div id="delete-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-xl shadow-2xl w-full max-w-md transform transition-all duration-300 scale-95 opacity-0" id="delete-content">
        <div class="p-6">
            <div class="text-center">
                <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100 mb-4">
                    <i class="fa fa-exclamation-triangle text-red-500 text-xl"></i>
                </div>
                <h3 class="text-lg font-bold text-gray-900 mb-2">确认删除</h3>
                <p class="text-sm text-gray-500 mb-6" id="delete-message">
                    你确定要删除该项目吗？此操作不可撤销。
                </p>
            </div>

            <div class="flex justify-center gap-3">
                <button id="cancel-delete" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-all btn-hover">
                    取消
                </button>
                <button id="confirm-delete" class="px-4 py-2 bg-danger text-white rounded-lg hover:bg-danger/90 transition-all btn-hover">
                    删除
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 操作成功提示 -->
<div id="toast" class="fixed bottom-4 right-4 bg-dark text-white px-6 py-3 rounded-lg shadow-lg transform translate-y-10 opacity-0 transition-all duration-500 flex items-center z-50">
    <i id="toast-icon" class="fa fa-check-circle mr-2"></i>
    <span id="toast-message">操作成功</span>
</div>

<script>
    // 模拟数据
    const mockProjects = [
        {
            id: 1,
            name: "城市商业中心",
            area: 50000,
            floors: 25,
            structure: "框架",
            prefabricated: "是",
            location: "上海市浦东新区",
            constructor: "上海建工集团",
            surveyor: "华东勘测设计研究院",
            surveyQualification: "甲级",
            designer: "同济大学建筑设计研究院",
            designQualification: "甲级",
            star: "三星级",
            description: "该项目为城市地标性商业综合体，集购物、餐饮、娱乐于一体，总投资约20亿元。",
            acceptanceTime: "2024-01-15",
            filingTime: "2024-02-05",
            reviewTime: "2024-02-20",
            status: "进行中"
        },
        {
            id: 2,
            name: "科技园区研发楼",
            area: 32000,
            floors: 18,
            structure: "框剪",
            prefabricated: "否",
            location: "北京市海淀区",
            constructor: "中国建筑一局",
            surveyor: "中国市政工程华北设计研究总院",
            surveyQualification: "甲级",
            designer: "中国建筑设计研究院",
            designQualification: "甲级",
            star: "二星级",
            description: "高科技企业研发基地，配备先进实验设备和办公设施，致力于人工智能和生物医药领域的研发。",
            acceptanceTime: "2024-03-20",
            filingTime: "2024-04-10",
            reviewTime: "2024-04-25",
            status: "进行中"
        },
        {
            id: 3,
            name: "生态住宅小区",
            area: 85000,
            floors: 12,
            structure: "混合",
            prefabricated: "是",
            location: "广州市天河区",
            constructor: "保利建设集团",
            surveyor: "广东省建筑设计研究院",
            surveyQualification: "甲级",
            designer: "华南理工大学建筑设计研究院",
            designQualification: "甲级",
            star: "一星级",
            description: "绿色生态住宅小区，采用太阳能、雨水收集等环保技术，绿化率达到45%。",
            acceptanceTime: "2024-02-10",
            filingTime: "2024-03-02",
            reviewTime: "2024-03-18",
            status: "已完成"
        },
        {
            id: 4,
            name: "城市图书馆",
            area: 25000,
            floors: 6,
            structure: "筒体",
            prefabricated: "否",
            location: "深圳市南山区",
            constructor: "华润置地建设有限公司",
            surveyor: "深圳市勘察测绘院",
            surveyQualification: "甲级",
            designer: "深圳市建筑设计研究总院",
            designQualification: "甲级",
            star: "三星级",
            description: "现代化公共图书馆，藏书量预计达到200万册，设有多媒体阅读区、儿童阅读区等功能区域。",
            acceptanceTime: "2024-04-05",
            filingTime: "2024-04-22",
            reviewTime: "2024-05-10",
            status: "待开工"
        },
        {
            id: 5,
            name: "医院扩建工程",
            area: 40000,
            floors: 15,
            structure: "框剪",
            prefabricated: "是",
            location: "杭州市西湖区",
            constructor: "浙江省建工集团",
            surveyor: "浙江省工程勘察院",
            surveyQualification: "甲级",
            designer: "浙江大学建筑设计研究院",
            designQualification: "甲级",
            star: "二星级",
            description: "医院扩建项目，新增床位500张，包括心血管科、肿瘤科等专科病房和先进的医疗设备。",
            acceptanceTime: "2024-01-28",
            filingTime: "2024-02-15",
            reviewTime: "2024-03-05",
            status: "进行中"
        }
    ];

    // 当前编辑的项目ID
    let currentProjectId = null;
    // 当前数据
    let currentProjects = [...mockProjects];

    // DOM元素
    const dataTableBody = document.getElementById('data-table-body');
    const addBtn = document.getElementById('add-btn');
    const projectModal = document.getElementById('project-modal');
    const modalContent = document.getElementById('modal-content');
    const closeModal = document.getElementById('close-modal');
    const cancelModal = document.getElementById('cancel-modal');
    const saveProject = document.getElementById('save-project');
    const modalTitle = document.getElementById('modal-title');
    const projectForm = document.getElementById('project-form');
    const filterBtn = document.getElementById('filter-btn');
    const filterPanel = document.getElementById('filter-panel');
    const searchInput = document.getElementById('search-input');
    const refreshBtn = document.getElementById('refresh-btn');
    const totalProjects = document.getElementById('total-projects');
    const activeProjects = document.getElementById('active-projects');
    const pendingProjects = document.getElementById('pending-projects');
    const detailModal = document.getElementById('detail-modal');
    const detailContent = document.getElementById('detail-content');
    const closeDetail = document.getElementById('close-detail');
    const closeDetailBtn = document.getElementById('close-detail-btn');
    const deleteModal = document.getElementById('delete-modal');
    const deleteContent = document.getElementById('delete-content');
    const cancelDelete = document.getElementById('cancel-delete');
    const confirmDelete = document.getElementById('confirm-delete');
    const deleteMessage = document.getElementById('delete-message');
    const toast = document.getElementById('toast');
    const toastMessage = document.getElementById('toast-message');
    const toastIcon = document.getElementById('toast-icon');

    // 初始化页面
    function init() {
        renderTable();
        updateStats();
        bindEvents();
    }

    // 绑定事件
    function bindEvents() {
        // 添加项目按钮
        addBtn.addEventListener('click', () => {
            openModal('add');
        });

        // 关闭模态框
        closeModal.addEventListener('click', closeProjectModal);
        cancelModal.addEventListener('click', closeProjectModal);

        // 保存项目
        saveProject.addEventListener('click', handleSaveProject);

        // 筛选按钮
        filterBtn.addEventListener('click', toggleFilterPanel);

        // 搜索功能
        searchInput.addEventListener('input', handleSearch);

        // 刷新按钮
        refreshBtn.addEventListener('click', () => {
            showToast('数据已刷新', 'fa-refresh');
            renderTable();
        });

        // 关闭详情模态框
        closeDetail.addEventListener('click', closeDetailModal);
        closeDetailBtn.addEventListener('click', closeDetailModal);

        // 删除确认
        cancelDelete.addEventListener('click', closeDeleteModal);
        confirmDelete.addEventListener('click', handleDeleteProject);
    }

    // 渲染表格
    function renderTable() {
        // 显示加载状态
        dataTableBody.innerHTML = `
        <tr class="animate-pulse">
          <td colspan="7" class="px-6 py-12 text-center">
            <div class="flex flex-col items-center">
              <i class="fa fa-spinner fa-spin text-primary text-3xl mb-3"></i>
              <p class="text-gray-500">正在加载数据...</p>
            </div>
          </td>
        </tr>
      `;

        // 模拟API请求延迟
        setTimeout(() => {
            if (currentProjects.length === 0) {
                dataTableBody.innerHTML = `
            <tr>
              <td colspan="7" class="px-6 py-12 text-center">
                <div class="flex flex-col items-center">
                  <i class="fa fa-folder-open-o text-gray-300 text-5xl mb-4"></i>
                  <p class="text-gray-500">暂无数据</p>
                  <button id="empty-add-btn" class="mt-3 px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-all btn-hover">
                    <i class="fa fa-plus mr-2"></i>添加项目
                  </button>
                </div>
              </td>
            </tr>
          `;

                // 空状态下的添加按钮
                document.getElementById('empty-add-btn').addEventListener('click', () => {
                    openModal('add');
                });
            } else {
                // 渲染数据
                let html = '';
                currentProjects.forEach((project, index) => {
                    const statusClass = project.status === '进行中' ? 'bg-green-100 text-green-800' :
                        project.status === '已完成' ? 'bg-blue-100 text-blue-800' :
                            'bg-yellow-100 text-yellow-800';
                    const statusIcon = project.status === '进行中' ? 'fa-spinner' :
                        project.status === '已完成' ? 'fa-check-circle' :
                            'fa-clock-o';

                    html += `
              <tr class="hover:bg-gray-50 transition-colors">
                <td class="px-6 py-4 whitespace-nowrap">
                  <div class="flex items-center">
                    <input type="checkbox" class="mr-2 h-4 w-4 text-primary rounded border-gray-300 focus:ring-primary">
                    <span class="text-sm font-medium text-gray-900">${project.id}</span>
                  </div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                  <div class="text-sm font-medium text-gray-900">${project.name}</div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                  <div class="text-sm text-gray-900">${project.area.toLocaleString()} ㎡</div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                  <div class="text-sm text-gray-900">${project.structure}</div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                  <div class="text-sm text-gray-900">${project.constructor}</div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                  <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${statusClass}">
                    <i class="fa ${statusIcon} mr-1"></i>${project.status}
                  </span>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                  <button class="text-primary hover:text-primary/80 mr-3 view-btn" data-id="${project.id}">
                    <i class="fa fa-eye mr-1"></i>查看
                  </button>
                  <button class="text-secondary hover:text-secondary/80 mr-3 edit-btn" data-id="${project.id}">
                    <i class="fa fa-pencil mr-1"></i>编辑
                  </button>
                  <button class="text-danger hover:text-danger/80 delete-btn" data-id="${project.id}">
                    <i class="fa fa-trash mr-1"></i>删除
                  </button>
                </td>
              </tr>
            `;
                });

                dataTableBody.innerHTML = html;

                // 绑定查看、编辑和删除按钮事件
                document.querySelectorAll('.view-btn').forEach(btn => {
                    btn.addEventListener('click', (e) => {
                        const id = parseInt(e.currentTarget.dataset.id);
                        openDetailModal(id);
                    });
                });

                document.querySelectorAll('.edit-btn').forEach(btn => {
                    btn.addEventListener('click', (e) => {
                        const id = parseInt(e.currentTarget.dataset.id);
                        openModal('edit', id);
                    });
                });

                document.querySelectorAll('.delete-btn').forEach(btn => {
                    btn.addEventListener('click', (e) => {
                        const id = parseInt(e.currentTarget.dataset.id);
                        openDeleteModal(id);
                    });
                });
            }

            // 更新统计信息
            updateStats();
        }, 500);
    }

    // 更新统计信息
    function updateStats() {
        totalProjects.textContent = currentProjects.length;

        const activeCount = currentProjects.filter(p => p.status === '进行中').length;
        activeProjects.textContent = activeCount;

        const pendingCount = currentProjects.filter(p => p.status === '待开工').length;
        pendingProjects.textContent = pendingCount;

        // 更新分页信息
        document.getElementById('total-count').textContent = currentProjects.length;
        document.getElementById('page-total').textContent = Math.min(10, currentProjects.length);
    }

    // 打开模态框
    function openModal(mode, id = null) {
        if (mode === 'edit') {
            const project = currentProjects.find(p => p.id === id);
            if (project) {
                currentProjectId = id;
                modalTitle.textContent = '编辑项目';

                // 填充表单数据
                document.getElementById('project-id').value = project.id;
                document.getElementById('project-name').value = project.name;
                document.getElementById('project-area').value = project.area;
                document.getElementById('project-floors').value = project.floors;
                document.getElementById('project-structure').value = project.structure;
                document.getElementById('project-prefabricated').value = project.prefabricated;
                document.getElementById('project-location').value = project.location;
                document.getElementById('project-constructor').value = project.constructor;
                document.getElementById('project-surveyor').value = project.surveyor;
                document.getElementById('project-survey-qualification').value = project.surveyQualification;
                document.getElementById('project-designer').value = project.designer;
                document.getElementById('project-design-qualification').value = project.designQualification;
                document.getElementById('project-star').value = project.star || '';
                document.getElementById('project-description').value = project.description || '';
            }
        } else {
            currentProjectId = null;
            modalTitle.textContent = '新增项目';
            projectForm.reset();

            // 设置默认值
            document.getElementById('project-prefabricated').value = '否';
        }

        // 显示模态框并添加动画
        projectModal.classList.remove('hidden');
        setTimeout(() => {
            modalContent.classList.remove('scale-95', 'opacity-0');
            modalContent.classList.add('scale-100', 'opacity-100');
        }, 10);
    }

    // 关闭项目模态框
    function closeProjectModal() {
        modalContent.classList.remove('scale-100', 'opacity-100');
        modalContent.classList.add('scale-95', 'opacity-0');

        setTimeout(() => {
            projectModal.classList.add('hidden');
        }, 300);
    }

    // 处理保存项目
    function handleSaveProject() {
        // 验证表单
        if (!projectForm.checkValidity()) {
            projectForm.reportValidity();
            return;
        }

        // 获取表单数据
        const formData = {
            name: document.getElementById('project-name').value,
            area: parseInt(document.getElementById('project-area').value),
            floors: parseInt(document.getElementById('project-floors').value) || null,
            structure: document.getElementById('project-structure').value,
            prefabricated: document.getElementById('project-prefabricated').value,
            location: document.getElementById('project-location').value,
            constructor: document.getElementById('project-constructor').value,
            surveyor: document.getElementById('project-surveyor').value || '',
            surveyQualification: document.getElementById('project-survey-qualification').value || '',
            designer: document.getElementById('project-designer').value || '',
            designQualification: document.getElementById('project-design-qualification').value || '',
            star: document.getElementById('project-star').value || '',
            description: document.getElementById('project-description').value || '',
            acceptanceTime: new Date().toISOString().split('T')[0],
            filingTime: '',
            reviewTime: '',
            status: '待开工'
        };

        // 模拟API请求
        if (currentProjectId) {
            // 更新项目
            const index = currentProjects.findIndex(p => p.id === currentProjectId);
            if (index !== -1) {
                currentProjects[index] = { ...currentProjects[index], ...formData };
                showToast('项目更新成功', 'fa-check-circle');
            }
        } else {
            // 新增项目
            const newId = currentProjects.length > 0 ? Math.max(...currentProjects.map(p => p.id)) + 1 : 1;
            currentProjects.unshift({ id: newId, ...formData });
            showToast('项目添加成功', 'fa-plus-circle');
        }

        // 重新渲染表格并关闭模态框
        renderTable();
        closeProjectModal();
    }

    // 切换筛选面板
    function toggleFilterPanel() {
        if (filterPanel.classList.contains('hidden')) {
            filterPanel.classList.remove('hidden');
            filterPanel.style.maxHeight = '500px';
        } else {
            filterPanel.style.maxHeight = '0';
            setTimeout(() => {
                filterPanel.classList.add('hidden');
            }, 300);
        }
    }

    // 处理搜索
    function handleSearch() {
        const searchTerm = searchInput.value.toLowerCase().trim();

        if (!searchTerm) {
            currentProjects = [...mockProjects];
            renderTable();
            return;
        }

        // 模拟API搜索
        const filteredProjects = mockProjects.filter(project => {
            return (
                project.name.toLowerCase().includes(searchTerm) ||
                project.constructor.toLowerCase().includes(searchTerm) ||
                project.location.toLowerCase().includes(searchTerm) ||
                project.structure.toLowerCase().includes(searchTerm)
            );
        });

        currentProjects = filteredProjects;
        renderTable();
    }

    // 打开详情模态框
    function openDetailModal(id) {
        const project = currentProjects.find(p => p.id === id);
        if (project) {
            // 填充详情数据
            document.getElementById('detail-name').textContent = project.name;
            document.getElementById('detail-area').textContent = `${project.area.toLocaleString()} ㎡`;
            document.getElementById('detail-floors').textContent = project.floors || '未指定';
            document.getElementById('detail-structure').textContent = project.structure;
            document.getElementById('detail-prefabricated').textContent = project.prefabricated === '是' ? '是' : '否';
            document.getElementById('detail-location').textContent = project.location;
            document.getElementById('detail-constructor').textContent = project.constructor;
            document.getElementById('detail-surveyor').textContent = project.surveyor || '未指定';
            document.getElementById('detail-survey-qualification').textContent = project.surveyQualification || '未指定';
            document.getElementById('detail-designer').textContent = project.designer || '未指定';
            document.getElementById('detail-design-qualification').textContent = project.designQualification || '未指定';
            document.getElementById('detail-star').textContent = project.star || '未评级';
            document.getElementById('detail-description').textContent = project.description || '无描述';
            document.getElementById('detail-acceptance-time').textContent = project.acceptanceTime || '未受理';
            document.getElementById('detail-filing-time').textContent = project.filingTime || '未备案';
            document.getElementById('detail-review-time').textContent = project.reviewTime || '未审查';

            // 显示模态框并添加动画
            detailModal.classList.remove('hidden');
            setTimeout(() => {
                detailContent.classList.remove('scale-95', 'opacity-0');
                detailContent.classList.add('scale-100', 'opacity-100');
            }, 10);
        }
    }

    // 关闭详情模态框
    function closeDetailModal() {
        detailContent.classList.remove('scale-100', 'opacity-100');
        detailContent.classList.add('scale-95', 'opacity-0');

        setTimeout(() => {
            detailModal.classList.add('hidden');
        }, 300);
    }

    // 打开删除确认模态框
    function openDeleteModal(id) {
        const project = currentProjects.find(p => p.id === id);
        if (project) {
            currentProjectId = id;
            deleteMessage.textContent = `你确定要删除项目 "${project.name}" 吗？此操作不可撤销。`;

            // 显示模态框并添加动画
            deleteModal.classList.remove('hidden');
            setTimeout(() => {
                deleteContent.classList.remove('scale-95', 'opacity-0');
                deleteContent.classList.add('scale-100', 'opacity-100');
            }, 10);
        }
    }

    // 关闭删除确认模态框
    function closeDeleteModal() {
        deleteContent.classList.remove('scale-100', 'opacity-100');
        deleteContent.classList.add('scale-95', 'opacity-0');

        setTimeout(() => {
            deleteModal.classList.add('hidden');
        }, 300);
    }

    // 处理删除项目
    function handleDeleteProject() {
        if (currentProjectId) {
            const projectIndex = currentProjects.findIndex(p => p.id === currentProjectId);
            if (projectIndex !== -1) {
                const deletedProject = currentProjects[projectIndex];
                currentProjects.splice(projectIndex, 1);
                showToast(`项目 "${deletedProject.name}" 已删除`, 'fa-trash');
                renderTable();
            }
        }
        closeDeleteModal();
    }

    // 显示提示消息
    function showToast(message, icon) {
        toastMessage.textContent = message;
        toastIcon.className = `fa ${icon} mr-2`;

        toast.classList.remove('translate-y-10', 'opacity-0');
        toast.classList.add('translate-y-0', 'opacity-100');

        setTimeout(() => {
            toast.classList.remove('translate-y-0', 'opacity-100');
            toast.classList.add('translate-y-10', 'opacity-0');
        }, 3000);
    }

    // 初始化
    document.addEventListener('DOMContentLoaded', init);
</script>
</body>
</html>
    